<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>需求管理平台 - 首页</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#3b82f6',
secondary: '#64748b'
},
borderRadius: {
'none': '0px',
'sm': '2px',
DEFAULT: '4px',
'md': '8px',
'lg': '12px',
'xl': '16px',
'2xl': '20px',
'3xl': '24px',
'full': '9999px',
'button': '4px'
}
}
}
}
</script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
body {
min-height: 1024px;
font-family: 'Helvetica Neue', sans-serif;
}
.font-pacifico {
font-family: 'Pacifico', cursive;
}
.icon-wrapper {
display: flex;
justify-content: center;
align-items: center;
}
.status-dot {
width: 10px;
height: 10px;
border-radius: 50%;
display: inline-block;
margin-right: 8px;
}
.status-normal {
background-color: #10b981;
}
.status-warning {
background-color: #f59e0b;
}
.status-error {
background-color: #ef4444;
}
.status-processing {
background-color: #3b82f6;
}
</style>
</head>
<body class="bg-gray-50 text-gray-800">
<!-- 顶部导航栏 -->
<header class="bg-white shadow-sm h-16 flex items-center justify-between px-6 fixed w-full z-10">
<div class="flex items-center space-x-4">
<div class="font-pacifico text-2xl text-primary">logo</div>
<nav class="hidden md:flex space-x-6">
<a href="#" class="text-gray-700 hover:text-primary">首页</a>
<a href="#" class="text-gray-700 hover:text-primary">我的需求</a>
<a href="#" class="text-gray-700 hover:text-primary">待办任务</a>
<a href="#" class="text-gray-700 hover:text-primary">知识库</a>
<a href="#" class="text-gray-700 hover:text-primary">数据血缘图谱</a>
</nav>
</div>
<div class="flex items-center space-x-4">
<div class="relative">
<input type="text" placeholder="搜索需求、提需人、组织..." class="pl-10 pr-4 py-2 border border-gray-300 rounded-md text-sm w-64 focus:outline-none focus:ring-2 focus:ring-primary">
<i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 text-sm icon-wrapper w-5 h-5"></i>
</div>
<div class="relative">
<button class="text-gray-600 hover:text-primary">
<i class="fas fa-bell text-lg icon-wrapper w-6 h-6"></i>
<span class="absolute top-0 right-0 bg-red-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">3</span>
</button>
</div>
<div class="relative group">
<button class="flex items-center space-x-2 focus:outline-none">
<img src="https://ai-public.mastergo.com/gen_page/avatar_placeholder_40x40.png" alt="用户头像" class="w-8 h-8 rounded-full">
<span class="text-sm">张伟</span>
<i class="fas fa-chevron-down text-xs text-gray-500"></i>
</button>
<div class="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-2 hidden group-hover:block z-20">
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">个人设置</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">退出登录</a>
</div>
</div>
</div>
</header>
<!-- 主体内容 -->
<div class="flex pt-16">
<!-- 侧边栏 -->
<aside class="w-64 bg-white shadow-md h-screen fixed pt-4">
<nav>
<a href="#" class="flex items-center px-6 py-3 text-primary bg-blue-50 border-l-4 border-primary">
<i class="fas fa-home mr-3 text-sm icon-wrapper w-5 h-5"></i>
<span>首页</span>
</a>
<a href="#" class="flex items-center px-6 py-3 text-gray-600 hover:bg-gray-50">
<i class="fas fa-list mr-3 text-sm icon-wrapper w-5 h-5"></i>
<span>我的需求</span>
</a>
<a href="#" class="flex items-center px-6 py-3 text-gray-600 hover:bg-gray-50">
<i class="fas fa-tasks mr-3 text-sm icon-wrapper w-5 h-5"></i>
<span>待办任务</span>
</a>
<a href="#" class="flex items-center px-6 py-3 text-gray-600 hover:bg-gray-50">
<i class="fas fa-book mr-3 text-sm icon-wrapper w-5 h-5"></i>
<span>知识库</span>
</a>
<a href="#" class="flex items-center px-6 py-3 text-gray-600 hover:bg-gray-50">
<i class="fas fa-project-diagram mr-3 text-sm icon-wrapper w-5 h-5"></i>
<span>数据血缘图谱</span>
</a>
<a href="#" class="flex items-center px-6 py-3 text-gray-600 hover:bg-gray-50">
<i class="fas fa-comments mr-3 text-sm icon-wrapper w-5 h-5"></i>
<span>协作空间</span>
</a>
<a href="#" class="flex items-center px-6 py-3 text-gray-600 hover:bg-gray-50">
<i class="fas fa-history mr-3 text-sm icon-wrapper w-5 h-5"></i>
<span>审计日志</span>
</a>
<a href="#" class="flex items-center px-6 py-3 text-gray-600 hover:bg-gray-50">
<i class="fas fa-sticky-note mr-3 text-sm icon-wrapper w-5 h-5"></i>
<span>笔记</span>
</a>
<a href="#" class="flex items-center px-6 py-3 text-gray-600 hover:bg-gray-50">
<i class="fas fa-file-excel mr-3 text-sm icon-wrapper w-5 h-5"></i>
<span>Excel/文档管理</span>
</a>
<a href="#" class="flex items-center px-6 py-3 text-gray-600 hover:bg-gray-50">
<i class="fas fa-cog mr-3 text-sm icon-wrapper w-5 h-5"></i>
<span>设置</span>
</a>
</nav>
</aside>
<!-- 主内容区域 -->
<main class="ml-64 p-6 w-full">
<!-- 筛选与排序区 -->
<div class="bg-white rounded-lg shadow-sm p-4 mb-6">
<div class="flex justify-between items-center mb-4">
<h2 class="text-lg font-semibold">需求筛选</h2>
<button class="text-sm text-primary hover:underline">展开筛选器</button>
</div>
<div class="grid grid-cols-4 gap-4 mb-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">提需人 / 组织</label>
<input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-primary">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">业务域</label>
<input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-primary">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">当前状态</label>
<select class="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-primary">
<option>全部</option>
<option>待处理</option>
<option>进行中</option>
<option>已完成</option>
<option>异常</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">创建时间</label>
<input type="date" class="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-primary">
</div>
</div>
<div class="flex justify-between items-center">
<div class="flex space-x-4">
<button class="px-4 py-2 bg-primary text-white rounded-button whitespace-nowrap">应用筛选</button>
<button class="px-4 py-2 border border-gray-300 rounded-button whitespace-nowrap">重置</button>
</div>
<div>
<label class="text-sm font-medium text-gray-700 mr-2">排序方式</label>
<select class="px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-primary">
<option>创建时间</option>
<option>更新时间</option>
<option>优先级</option>
</select>
</div>
</div>
</div>
<!-- 需求列表区 -->
<div class="bg-white rounded-lg shadow-sm overflow-hidden">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">需求编号</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">需求名称</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">提需人 & 组织</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">业务域</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">当前状态</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">负责人</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">创建时间</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">最近更新</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">REQ-20231001</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-primary hover:underline"><a href="#">用户行为分析报表开发</a></td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">李明 - 数据分析部</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">用户增长</td>
<td class="px-6 py-4 whitespace-nowrap text-sm">
<span class="flex items-center">
<span class="status-dot status-processing"></span>
进行中
</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">王芳</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-10-01</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-10-05</td>
<td class="px-6 py-4 whitespace-nowrap text-sm">
<button class="text-primary hover:text-blue-700 mr-2">
<i class="fas fa-edit icon-wrapper w-5 h-5"></i>
</button>
<button class="text-primary hover:text-blue-700 mr-2">
<i class="fas fa-eye icon-wrapper w-5 h-5"></i>
</button>
<button class="text-primary hover:text-blue-700">
<i class="fas fa-copy icon-wrapper w-5 h-5"></i>
</button>
</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">REQ-20231002</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-primary hover:underline"><a href="#">客户画像标签体系优化</a></td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">陈丽 - 用户运营部</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">精准营销</td>
<td class="px-6 py-4 whitespace-nowrap text-sm">
<span class="flex items-center">
<span class="status-dot status-warning"></span>
预警
</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">赵强</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-10-02</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-10-04</td>
<td class="px-6 py-4 whitespace-nowrap text-sm">
<button class="text-primary hover:text-blue-700 mr-2">
<i class="fas fa-edit icon-wrapper w-5 h-5"></i>
</button>
<button class="text-primary hover:text-blue-700 mr-2">
<i class="fas fa-eye icon-wrapper w-5 h-5"></i>
</button>
<button class="text-primary hover:text-blue-700">
<i class="fas fa-copy icon-wrapper w-5 h-5"></i>
</button>
</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">REQ-20231003</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-primary hover:underline"><a href="#">数据权限管控模块开发</a></td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">刘洋 - 技术部</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">系统安全</td>
<td class="px-6 py-4 whitespace-nowrap text-sm">
<span class="flex items-center">
<span class="status-dot status-error"></span>
异常
</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">孙磊</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-10-03</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-10-05</td>
<td class="px-6 py-4 whitespace-nowrap text-sm">
<button class="text-primary hover:text-blue-700 mr-2">
<i class="fas fa-edit icon-wrapper w-5 h-5"></i>
</button>
<button class="text-primary hover:text-blue-700 mr-2">
<i class="fas fa-eye icon-wrapper w-5 h-5"></i>
</button>
<button class="text-primary hover:text-blue-700">
<i class="fas fa-copy icon-wrapper w-5 h-5"></i>
</button>
</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">REQ-20231004</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-primary hover:underline"><a href="#">BI 报表自动化调度优化</a></td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">周杰 - 数据平台部</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">数据可视化</td>
<td class="px-6 py-4 whitespace-nowrap text-sm">
<span class="flex items-center">
<span class="status-dot status-normal"></span>
已完成
</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">吴敏</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-10-04</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-10-06</td>
<td class="px-6 py-4 whitespace-nowrap text-sm">
<button class="text-primary hover:text-blue-700 mr-2">
<i class="fas fa-edit icon-wrapper w-5 h-5"></i>
</button>
<button class="text-primary hover:text-blue-700 mr-2">
<i class="fas fa-eye icon-wrapper w-5 h-5"></i>
</button>
<button class="text-primary hover:text-blue-700">
<i class="fas fa-copy icon-wrapper w-5 h-5"></i>
</button>
</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">REQ-20231005</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-primary hover:underline"><a href="#">用户活跃度指标体系建设</a></td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">黄涛 - 产品部</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">产品运营</td>
<td class="px-6 py-4 whitespace-nowrap text-sm">
<span class="flex items-center">
<span class="status-dot status-processing"></span>
进行中
</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">林雪</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-10-05</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-10-07</td>
<td class="px-6 py-4 whitespace-nowrap text-sm">
<button class="text-primary hover:text-blue-700 mr-2">
<i class="fas fa-edit icon-wrapper w-5 h-5"></i>
</button>
<button class="text-primary hover:text-blue-700 mr-2">
<i class="fas fa-eye icon-wrapper w-5 h-5"></i>
</button>
<button class="text-primary hover:text-blue-700">
<i class="fas fa-copy icon-wrapper w-5 h-5"></i>
</button>
</td>
</tr>
</tbody>
</table>
<div class="px-6 py-4 border-t border-gray-200 flex justify-between items-center">
<div class="text-sm text-gray-700">
显示第 1 到 5 条，共 20 条
</div>
<div class="flex space-x-2">
<button class="px-3 py-1 border border-gray-300 rounded-md text-sm hover:bg-gray-100">上一页</button>
<button class="px-3 py-1 bg-primary text-white rounded-md text-sm">1</button>
<button class="px-3 py-1 border border-gray-300 rounded-md text-sm hover:bg-gray-100">2</button>
<button class="px-3 py-1 border border-gray-300 rounded-md text-sm hover:bg-gray-100">3</button>
<button class="px-3 py-1 border border-gray-300 rounded-md text-sm hover:bg-gray-100">下一页</button>
</div>
</div>
</div>
<!-- AI辅助提示区 -->
<div class="mt-6 bg-blue-50 border border-blue-200 rounded-lg p-4">
<div class="flex items-start">
<i class="fas fa-robot text-blue-500 text-lg icon-wrapper w-6 h-6 mt-1"></i>
<div class="ml-3">
<h3 class="text-sm font-medium text-blue-800">AI 智能推荐</h3>
<p class="text-sm text-blue-700 mt-1">根据当前筛选条件，推荐关注以下需求：</p>
<ul class="mt-2 space-y-1">
<li class="text-sm text-blue-600 hover:underline"><a href="#">REQ-20230915 - 用户分群模型优化</a></li>
<li class="text-sm text-blue-600 hover:underline"><a href="#">REQ-20230922 - 数据质量监控平台建设</a></li>
</ul>
</div>
</div>
</div>
</main>
</div>
<!-- 新增需求入口 -->
<button class="fixed bottom-8 right-8 w-14 h-14 bg-primary text-white rounded-full shadow-lg flex items-center justify-center hover:bg-blue-700 focus:outline-none">
<i class="fas fa-plus text-xl icon-wrapper w-6 h-6"></i>
</button>
</body>
</html>